import { CommonModule } from '@angular/common';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';

import { AntModule } from '../core/modules/ant.module';
import { MaterialModule } from '../core/modules/material.module';
import { MaterialLikeModule } from '../extensions/bundles/material-like/material-like.module';
import { BootstrapStyleModule } from '../extensions/bundles/bootstrap-style/bootstrap-style.module';
import { DevExtremeModule } from '../core/modules/dev-extreme.module';
import { ChartComponent } from './components/chart/chart.component';
import { ModalDialogComponent } from './components/modal-dialog/modal-dialog.component';
import { AsyncRequestorComponent } from './components/async-requestor/async-requestor.component';
import { HorizontalTimelineComponent } from './components/horizontal-timeline/horizontal-timeline.component';
import { MaterialDatePickerComponent } from './components/material-date-picker/material-date-picker.component';
import { ValueIndicatorComponent } from './components/value-indicator/value-indicator.component';
import { ForbiddenValueDirective } from './directives/validators/forbidden-value.directive';
import { FormGroupValidationClassDirective } from './directives/form-group-validation-class';
import { HighlightDirective } from './directives/highlight.directive';
import { InvalidFormatDirective } from './directives/validators/invalid-format.directive';
import { ProjectedTemplateDirective } from './directives/projected-template.directive';
import { RequiredLabelDirective } from './directives/required-label.directive';
import { TextAutoSizeNoWrapDirective } from './directives/text-auto-size-no-wrap.directive';
import { ValueNotMatchDirective } from './directives/validators/value-not-match.directive';
import { HighLightPipe } from './pipes/high-light.pipe';
import { UserStatusPipe } from './pipes/user-status.pipe';
// Re-exporting other modules

// SharedModule exists to make commonly used components, directives, and pipes available for use in the templates of components in many other modules.

// If you review the application, you may notice that many components requiring SharedModule directives also 
// use NgIf and NgFor from CommonModule and bind to component properties with [(ngModel)], a directive in the FormsModule. 
// Modules that declare these components would have to import CommonModule, FormsModule, and SharedModule.

// You can reduce the repetition by having SharedModule re-export CommonModule and FormsModule so that importers of 
// SharedModule get CommonModule and FormsModule for free.

// As it happens, the components declared by SharedModule itself don't bind with [(ngModel)]. Technically, there is no 
// need for SharedModule to import FormsModule.

// SharedModule can still export FormsModule without listing it among its imports.

@NgModule({
    imports: [
        AntModule,
        CommonModule,
        FormsModule,
        MaterialModule,
        DevExtremeModule,
        ReactiveFormsModule,
        MaterialLikeModule
        // BootstrapStyleModule
    ],
    exports: [
        AntModule,
        CommonModule,
        FormsModule,
        ReactiveFormsModule,
        RouterModule,
        MaterialModule,
        DevExtremeModule,
        MaterialLikeModule,
        // BootstrapStyleModule,
        ChartComponent,
        ModalDialogComponent,
        AsyncRequestorComponent,
        HorizontalTimelineComponent,
        MaterialDatePickerComponent,
        ForbiddenValueDirective,
        FormGroupValidationClassDirective,
        HighlightDirective,
        InvalidFormatDirective,
        ProjectedTemplateDirective,
        RequiredLabelDirective,
        TextAutoSizeNoWrapDirective,
        ValueNotMatchDirective,
        HighLightPipe,
        UserStatusPipe,
        ValueIndicatorComponent
    ],
    declarations: [
        ChartComponent,
        ModalDialogComponent,
        AsyncRequestorComponent,
        HorizontalTimelineComponent,
        MaterialDatePickerComponent,
        ForbiddenValueDirective,
        FormGroupValidationClassDirective,
        HighlightDirective,
        InvalidFormatDirective,
        ProjectedTemplateDirective,
        RequiredLabelDirective,
        TextAutoSizeNoWrapDirective,
        ValueNotMatchDirective,
        HighLightPipe,
        UserStatusPipe,
        ValueIndicatorComponent
    ],
    // DO NOT specify app-wide singleton providers in a shared module. A lazy-loaded module that imports that 
    // shared module makes its own copy of the service.
    // The SharedModule should NOT have providers for reasons explained previously. 
    // Nor should any of its imported or re-exported modules have providers.
    providers: [

    ]
})
export class SharedModule { }